<!--
 描述: 动态轮播折线图
 作者: Jack Chen
 日期: 2020-04-18
-->

<template>
    <div class="wrap-container sn-container" style="width: 900px; height: 400px">
        <div class="sn-content">
            <span style="
          font-size: 35px;
          margin-top: 20%;
          margin-bottom: -25px;
          top: 0%;
          color: #00c2ff;
        ">
                <img src="../assets/下雨.png" style="margin-right: 10px; margin-left: 10px; margin-top: 10px" />
                <span>动态雨量展示</span>
            </span>

            <div class="chartsdom" id="chart_dt"></div>
        </div>
    </div>
</template>

<script>
import * as echarts from "echarts";
import time from "@/utils/time";
export default {
    name: "dynamicLine",
    data() {
        return {
            xData: [],
            now: +new Date(2019, 1, 1),
            value: Math.random() * 1000,
            oneDay: 24 * 3600 * 1000,
            timer: null,
            intervalDuration: 1000,
        };
    },
    created() {
        // this.initData();
        // this.timer = setInterval(() => {
        //   this.updateData();
        // }, this.intervalDuration);
    },
    mounted() {
        this.getEchart();
    },
    methods: {
        initData() {
            // 初始化数据，假设初始时间为 0 秒
            this.now = new Date(0);
            this.xData = [];
            for (let i = 0; i < 5; i++) {
                this.xData.push(this.randomData());
            }
        },
        updateData() {
            // 更新数据，生成新的时间数据
            for (let i = 0; i < 5; i++) {
                this.xData.shift();
                this.xData.push(this.randomData());
            }
        },
        // formatTime(date) {
        //   // 辅助方法，格式化时间
        //   return [date.getHours(), date.getMinutes(), date.getSeconds()].join(":");
        // },
        //   randomData(randdata) {
        //     // 生成递增的时间数据
        //     this.now = new Date(+this.now + this.intervalDuration);
        //     // console.log(this.now.getSeconds())
        //     this.value=randdata;
        //     return {
        //         name: this.now.toString(),
        //       value: [
        //         [
        //         this.now.getHours(),
        //         this.now.getMinutes(),
        //         this.now.getSeconds(),
        //         ].join(":"),
        //       Math.round(this.value),
        //     ],
        //     };
        //   },

        randomData(randdata) {
            this.now = new Date(+this.now + this.oneDay);
            //   console.log(this.now)
            this.value = randdata;
            return {
                name: this.now.toString(),
                value: [
                    [
                        this.now.getFullYear(),
                        this.now.getMonth() + 1,
                        this.now.getDate(),
                    ].join("/"),
                    Math.round(this.value),
                ],
            };
        },

        // randomData(randdata) {
        //   this.now = new Date(+this.now + this.oneDay);
        //   this.value = randdata;
        //   return {
        //     name: this.formatTime(this.now), // 使用新的格式化函数
        //     value: [
        //       [
        //         this.now.getHours(),
        //         this.now.getMinutes(),
        //         this.now.getSeconds(),
        //       ].join(":"),
        //       Math.round(this.value),
        //     ],
        //   };
        // },
        getEchart() {
            const myChart = echarts.init(document.getElementById("chart_dt"), "dark");
            for (let i = 0; i < 1000; i++) {
                this.xData.push(this.randomData());
            }

            this.option = {
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        axisPointer: {
                            type: "cross",
                            label: {
                                backgroundColor: "#283b56",
                            },
                        },
                    },
                },
                grid: {
                    top: "10%",
                    left: "3%",
                    right: "12%",
                    bottom: "3%",
                    containLabel: true,
                },
                visualMap: {
                    show: false,
                    dimension: 1,
                    pieces: [
                        {
                            gte: 5,
                            lte: 55, // 小于 55就是绿色
                            color: "#0BD2C8",
                        },
                        {
                            gt: 55, // 大于 55 就是红色警告
                            color: "#f97f7f",
                        },
                        // {
                        //   lt: 50,
                        //   color: "#f97f7f",
                        // },
                    ],
                },
                calculable: true,
                xAxis: {
                    type: "time",
                    name: "时-分-秒",
                    boundaryGap: false,
                    splitNumber: 5,
                    //   axisLabel: {
                    //     formatter: (value, index) => {
                    //       let dateTime = this.$utils.getFormatTime(value);
                    //       dateTime = dateTime.substring(0, dateTime.length - 3);
                    //       return dateTime.replace(" ", "\n");
                    //     },
                    //   },
                    axisLabel: {
                        // formatter(value) {
                        //     let date = new Date(value);
                        //     return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                        // }
                        // formatter(value) {
                        //   let date = new Date(value);
                        //   let hours = date.getHours();
                        //   let minutes = date.getMinutes();
                        //   let seconds = date.getSeconds();
                        //   let totalSeconds = hours * 3600 + minutes * 60 + seconds;
                        //   return formatTime(totalSeconds);
                        // },
                        formatter(value) {
                            let date = new Date(value);
                            return (
                                date.getFullYear() +
                                ":" +
                                date.getMonth() +
                                ":" +
                                date.getDate()
                            );
                        },
                        // formatter: function (params) {
                        //         params = params[0];
                        //         var date = new Date(params.name);
                        //         return (
                        //             date.getDate() +
                        //             "/" +
                        //             (date.getMonth() + 1) +
                        //             "/" +
                        //             date.getFullYear() +
                        //             " : " +
                        //             params.value[1]
                        //         );
                        //     },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#2867a8",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                },
                yAxis: {
                    type: "value",
                    scale: true,
                    name: "                  实时雨量（ mm ）",
                    min: 0,
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: "#2867a8",
                        },
                    },
                    splitLine: {
                        show: false,
                    },
                },
                series: [
                    {
                        name: "实时降雨量",
                        type: "line",
                        xAxisIndex: 0,
                        yAxisIndex: 0,
                        itemStyle: {
                            opacity: 0,
                        },
                        data: this.xData,
                        smooth: true,
                    },
                ],
            };

            myChart.setOption(this.option, true);

            window.addEventListener("resize", () => {
                myChart.resize();
            });

            this.timer = setInterval(() => {
                for (let i = 0; i < 5; i++) {
                    this.xData.shift();
                    this.xData.push(this.randomData());
                }

                myChart.setOption(this.option, true);
            }, 500);
        },
        Set_DY_Data(setdata) {
            //   console.log("setdata", setdata);
            this.xData.shift();
            this.xData.push(this.randomData(setdata));
            //   console.log("this.xData", this.xData[0]);
            // myChart.setOption(this.option, true);
        },
    },
    beforeDestroy() {
        clearInterval(this.timer);
    },
};
</script>

<style lang="scss" scoped>
.sn-container {
    // left: 1282px;
    // top: 1548px;
    width: 586px;
    height: 400px;

    .chartsdom {
        width: 100%;
        height: 100%;
    }
}
</style>
